<template>
    <div>
      <!-- 任务概览表单 -->
      <a-form
        :model="formState"
        :rules="rules"
        ref="formRef"
        layout="horizontal"
        :label-col="{
          style: {
            minWidth: '80px',
            textAlign: 'left',
          },
        }"
      >
        <!-- 任务名称 -->
        <a-form-item label="任务名称：" name="name">
          <a-input
            :disabled="true"
            v-model:value="formState.name"
            :placeholder="$t('test.objectmigration.components.tablemain.viewtask.index.placeholder_qsrrwmc')"
            @input="formState.name = formState.name.replace(/[^A-Za-z0-9_]/g, '')"
          />
        </a-form-item>
  
        <!-- 任务描述 -->
        <a-form-item label="任务描述：" name="desc">
          <a-input
            :disabled="true"
            v-model:value="formState.desc"
            :placeholder="$t('test.objectmigration.components.tablemain.viewtask.index.placeholder_qsrrwms')"
          />
        </a-form-item>
  
        <!-- 流程组 -->
        <a-form-item label="流程组：" name="group">
          <a-select
            :disabled="true"
            v-model:value="formState.group"
            :placeholder="$t('test.objectmigration.components.tablemain.viewtask.index.placeholder_qxzlcz')"
            :options="groupOptions"
          />
        </a-form-item>
        
        <!-- 目标库类型（多选） -->
        <a-form-item label="目标库类型：" name="dbTypes">
          <a-checkbox-group v-model:value="formState.dbTypes" :disabled="true">
            <a-checkbox v-for="item in dbTypeOptions" :key="item" :value="item">{{ item }}</a-checkbox>
          </a-checkbox-group>
        </a-form-item>
  
        <!-- 上传文件（仅UI展示） -->
        <a-form-item label="上传文件：" name="file">
          <a-input
            :disabled="true"
            v-model:value="formState.file"
            :placeholder="$t('test.objectmigration.components.tablemain.viewtask.index.placeholder_qsrrwms')"
          />
        </a-form-item>
      </a-form>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, defineExpose, defineEmits, watch } from 'vue';
  import * as http from '@/api/flow/index.js';
  import { message } from 'ant-design-vue';
  // import { useI18n } from 'vue-i18n'
  // const { t } = useI18n()
  const props = defineProps({
    record: {
      type: Object,
      default: () => ({}),
    },
    progressPercent: {
      type: String,
      default: '0',
    },
  });
  
  // 进度百分比，控制表单禁用
  const progressPercent = ref(props.progressPercent);
  
  // 表单引用
  const formRef = ref();
  
  // 表单数据，包含所有字段
  const formState = reactive({
    name: '',
    desc: '',
    group: null,
    dbTypes: [],
    file: '',
  });
  
  // 目标库类型选项
  const dbTypeOptions = ['oracle', 'postgresql', 'DB2', 'mysql'];
  
  // 流程组选项（模拟数据）
  const groupOptions = ref([
    { value: 'test', label: 'test' },
    { value: 'group1', label: '流程组1' },
    { value: 'group2', label: '流程组2' },
  ]);
  
  // 上传文件列表（仅UI展示）
  const fileList = ref([]);
  
  // 上传前钩子，阻止自动上传，只做UI展示
  function beforeUpload(file) {
    fileList.value = [file];
    formState.file = file;
    return false; // 阻止自动上传
  }
  
  // 表单校验规则
  const rules = {
    name: [
      { required: true, message: $t('test.objectmigration.components.tablemain.viewtask.index.message_qsrrwmc'), trigger: 'blur' },
      { min: 2, max: 30, message: '长度2-30个字符', trigger: 'blur' },
      { pattern: /^[A-Za-z0-9_]+$/, message: '仅支持字母、数字和下划线', trigger: 'blur' },
    ],
    desc: [
      { required: false, message: '', trigger: 'blur' },
    ],
    group: [
      { required: true, message: $t('test.objectmigration.components.tablemain.viewtask.index.message_qxzlcz'), trigger: 'change' },
    ],
    dbTypes: [
      { required: true, type: 'array', min: 1, message: $t('test.objectmigration.components.tablemain.viewtask.index.message_qzsxzygmbklx'), trigger: 'change' },
    ],
    file: [
      { required: false, message: '', trigger: 'blur' },
    ],
  };
  
  // 监听props.record变化，做表单回显
  watch(
    () => props.record,
    (val) => {
      if (val) {
        formState.name = val.flowName || '';
        formState.desc = val.flowDesc || '';
        formState.group = val.flowGroupId || null;
        formState.dbTypes = val.dbTypes || [];
        formState.file = val.flowFile || '';
        // 文件不做回显
      }
    },
    { immediate: true }
  );
  
  // 关闭弹窗事件
  const emit = defineEmits(['close', 'saved']);
  function closes() {
    emit('close');
  }
  
  // 保存表单
  async function handleSubmit() {
    try {
      await formRef.value.validate();
      const hideLoading = message.loading('正在验证表单', 0);
      let params = {
        cloneName: formState.name,
        cloneNumber: formState.desc,
        count: formState.dbTypes.length,
      }
      http.flowsCloneCheck(params).then(res => {
        hideLoading();
        if (res.code === '000000') {
          message.success('表单验证通过');
          emit('saved', { ...formState });
          closes();
        }
      });
    } catch (error) {
      console.log('表单验证失败', error);
    }
  }
  
  defineExpose({ closes });
  </script>

<style scoped>
/* 可根据需要自定义样式 */
</style>